<script lang="ts" setup>
import { BizType } from '@/types/enum'
import { computed, inject, ComputedRef } from 'vue'
const props = defineProps<{
  isControl: boolean
  fn?: Function
}>()
interface Form {
  day: number
  hour: number
  minute: number
}
interface MaxFormType {
  day: number
  hour: number
  minute: number
  overdueDay: number
  time: number
}
// 注入一个值，若为空则使用提供的默认值
const bizType = inject<ComputedRef<BizType>>(
  'bizType',
  computed(() => BizType.BikeLongTerm)
)
const type = inject<ComputedRef<'0' | '1'>>(
  'type',
  computed(() => '0')
)
/** 天小时分 */
const form = defineModel<Form>('form', { required: true })
/** 天小时分 次卡 逾期费最大值 */
const maxValues = defineModel<MaxFormType>('maxValues', { required: true })
/** 退逾期费 天数 */
const days = defineModel<number>('overdueDay', { required: true })
/** 退次卡 次数 */
const times = defineModel<number>('times', { required: true })

const isRentAndTimesCardType = computed(() => {
  return bizType.value === BizType.BatteryTimesCard && type.value === '0'
})
const isRentAndDaysType = computed(() => {
  return bizType.value !== BizType.BatteryTimesCard && type.value === '0'
})
const isOverDueType = computed(() => {
  return type.value === '1'
})

const updateFromDays = (callback?: Function) => {
  if (form.value.day < 0) form.value.day = 0
  if (form.value.day < (maxValues.value as Form).day) {
    maxValues.value.hour = 23
    maxValues.value.minute = 59
  }
  if (callback) callback()
}
const handleDaysChange = () => {
  updateFromDays(props.fn)
}
const updateFromHours = (callback?: Function) => {
  if (form.value.hour < 0) form.value.hour = 0
  if (form.value.hour < maxValues.value.hour) {
    maxValues.value.minute = 59
  }
  if (callback) callback()
}
const handleHoursChange = () => {
  updateFromHours(props.fn)
}
const updateFromMinutes = (callback?: Function) => {
  if (form.value.minute < 0) form.value.minute = 0
  if (callback) callback()
}
const handleMinutesChange = () => {
  updateFromMinutes(props.fn)
}
const updateFromTimes = () => {
  if (times.value < 0) times.value = 0
}
const updateFromOverdueDays = () => {
  if (days.value < 0) days.value = 0
}
</script>

<template>
  <template v-if="isRentAndDaysType">
    <el-input-number
      :controls="isControl"
      v-model="form.day"
      controls-position="right"
      :min="0"
      :max="maxValues.day"
      @change="handleDaysChange"
    />
    <span ml-5>天</span>
    <el-input-number
      :controls="isControl"
      controls-position="right"
      v-model="form.hour"
      :min="0"
      :max="maxValues.hour"
      @change="handleHoursChange"
    />
    <span>小时</span>
    <el-input-number
      :controls="isControl"
      controls-position="right"
      v-model="form.minute"
      :min="0"
      :max="maxValues.minute"
      @change="handleMinutesChange"
    />
    <span>分钟</span>
  </template>
  <template v-else-if="isRentAndTimesCardType">
    <el-input-number
      :controls="isControl"
      controls-position="right"
      v-model="times"
      :min="0"
      :max="maxValues.time"
      @change="updateFromTimes"
    />
    <span>次</span>
  </template>
  <template v-else-if="isOverDueType">
    <el-input-number
      :controls="isControl"
      controls-position="right"
      v-model="days"
      :min="0"
      :max="maxValues.overdueDay"
      @change="updateFromOverdueDays"
    />
    <span>天</span>
  </template>
</template>

<style scoped>
.el-input-number {
  width: 50px;
}

.el-input-number + span {
  margin-right: 5px;
  margin-left: 5px;
}
</style>
